<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      #div1 {
        width: 100px;
        height: 100px;
        background-color: red;
      }
    </style>
    <script>
      window.onload = function () {
        var oDiv1 = document.getElementById("div1");
        oDiv1.onmouseover = function () {
          cssStyle(this, {
            width: 300,
            height: 200,
            marginTop: -50,
            marginLeft: -50,
          });
        };
      };
      var timer = null;
      function cssStyle(node, cssObj, complete) {
        clearInterval(node.timer);
        node.timer = setInterval(function () {
          var isEnd = true;
          for (var attr in cssObj) {
            var iTarget = cssObj[attr];
            var iCur = parseInt(getStyle(node, attr));
            var speed = (iTarget - iCur) / 8;
            speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);

            node.style[attr] = speed + iCur + "px";

            if (iCur != iTarget) {
              isEnd = false;
            }
          }
          if (isEnd) {
            if (complete) {
              complete.call(node);
            }
          }
        }, 30);
      }
      //跨浏览器兼容
      function getStyle(node, cssStyle) {
        return node.currentStyle
          ? node.currentStyle[cssStyle]
          : getComputedStyle(node)[cssStyle];
      }
    </script>
  </head>
  <body>
    <div id="div1"></div>
  </body>
</html>
